<template>
  <div class="sortingOrder">
    <div class="sortTitle">分拣单</div>
    <div class="information">
      <div>
        <el-button type="primary" @click="toredactorder()">编辑表头</el-button>
        <el-button type="primary" @click="dialogFormVisible=true">增加一行商品</el-button>
        <el-button type="primary" @click="add">打印</el-button>
        <el-button type="primary" @click="copyYesterday">复制昨天</el-button>
        <el-dialog title="新增一行商品" :visible.sync="dialogFormVisible" width="30%">
          <div class="yemian">
            <span class="title">商品名称</span>
            <div class="xuanzeqi">
              <el-select class="xaunze_1" v-model="zhi_1" placeholder="选择商品">
                <el-option
                  v-for="item in list_1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="yemian">
            <span class="title">计划数量</span>
            <el-input class="input" v-model="num" placeholder="请输入数量"></el-input>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisibles">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <div ref="print" class="el-table-collection">
      <div class="el-table" style="margin-bottom:20px;">
        <el-table :data="tableData" border style="width:100%">
          <el-table-column prop="sortSn" label="分拣单号" width="200"></el-table-column>
          <el-table-column prop="supervisorName" label="分拣主管" width="100"></el-table-column>
          <el-table-column prop="sortLineName" label="分拣线" width="100"></el-table-column>
          <el-table-column prop="shifts" label="班次" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.shifts == 1">早班</span>
              <span v-if="scope.row.shifts == 2">晚班</span>
            </template>
          </el-table-column>
          <el-table-column prop="worker" label="上班人数" width="140"></el-table-column>
          <el-table-column prop="status" label="分拣状态" width="140">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">排产</span>
              <span v-if="scope.row.status == 1">加工</span>
              <span v-if="scope.row.status == 2">完成</span>
            </template>
          </el-table-column>
          <el-table-column prop="startAllocatingDate" label="开始时间" width="180"></el-table-column>
          <el-table-column prop="endAllocatingDate" label="结束时间" width="auto"></el-table-column>
        </el-table>
      </div>
      <el-table
        :data="sortPlanDetailBodyResqs"
        :summary-method="getSummaries"
        show-summary
        style="width:100%;"
      >
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="goodsId" label="商品id" min-width="15%"></el-table-column>
        <el-table-column prop="goods" label="商品名称" min-width="10%"></el-table-column>
        <el-table-column prop="goodsSpecification" label="商品规格" min-width="10%"></el-table-column>
        <el-table-column prop="price" label="价格" min-width="10%"></el-table-column>
        <el-table-column prop="rfidNum" label="Rfid数量" min-width="10%"></el-table-column>
        <el-table-column prop="groupNum" label="团购数量" min-width="10%"></el-table-column>
        <el-table-column prop="predictTotal" label="计划数量" min-width="10%"></el-table-column>
        <el-table-column label="操作" min-width="20%">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small" class="no-print">打印</el-button>
            <el-button @click="handleDelete(scope.row,scope.$index)" type="text" size="small">删除</el-button>
            <el-button type="text" size="small" @click="handlePacking(scope.row)">装箱</el-button>
            <el-button type="text" size="small" @click="handleEditor(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- dialog -->
      <el-dialog title="修改" :visible.sync="dialogTableVisible" width="30%">
        <el-form :model="form">
          <el-form-item label="商品名称" :label-width="formLabelWidth">
            <el-input v-model="form.goods" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="商品规格" :label-width="formLabelWidth">
            <el-input v-model="form.goodsSpecification" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="计划数量" :label-width="formLabelWidth">
            <el-input v-model="form.predictTotal" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="determine">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 打印模板 -->
    </div>
  </div>
</template>

<script>
import {
  sortingDetails,
  print,
  queryGoods,
  cascadeGoods,
  getsavedetial,
  putStorage,
  sortplanDelete,
  yesterday
} from "@/api/user";
export default {
  name: "menu2",
  //import所引入的组件注册
  components: {},
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: { goods: "", goodsSpecification: "", predictTotal: "" },
      formLabelWidth: "120px",
      sortPlanDetailBodyResqs: [],
      sortPlanDetailHeadResq: [],
      tableData: [],
      ischeck: false,
      list: [0],
      //第一个选择器的值
      zhi_1: "",
      //第一个选择器的选项
      list_1: "",
      //第二个选择器的值
      zhi_2: [],
      //第二个选择器的选项
      list_2: [],
      //总的结果
      zonshu: [],
      str: 0,
      zhi: [],
      goodsId: "", //商品id
      num: 1, // 计划数量
      id: "",
      ids: "",
      show: 1
    };
  },
  //方法集合
  methods: {
    add() {
      // this.printContent()
      // console.log(this.$print)
      this.$print(this.$refs.print); // 使用
      // this.$print(this.$refs.print)
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        if (index === 1) {
          sums[index] = "";
          return;
        }
        if (index == 4) {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += " 元";
          } else {
            sums[index] = "";
          }
        }
      });
      return sums;
    },
    copyYesterday() {
      yesterday().then(res => {
        console.log(res);
        if (res.code == 20000) {
          this.$message({ type: "success", message: res.msg });
          this.ischeck = true;
          this.BodyResqs();
        } else {
          this.$message({ type: "warning", message: res.msg });
        }
      });
    },
    //编辑回显
    handleEditor(row) {
      console.log(row);
      this.dialogTableVisible = true;
      this.form.goods = row.goods;
      this.form.goodsSpecification = row.goodsSpecification;
      this.ids = row.id;
      this.form.predictTotal = row.predictTotal;
    },
    determine() {
      let data = { id: this.ids, planCount: this.form.predictTotal };
      getsavedetial(data).then(res => {
        if (res.code == 20000) {
          this.ischeck = true;
          this.BodyResqs();
          this.dialogTableVisible = false;
          this.$message(res.msg);
        } else {
          this.$message(res.msg);
        }
      });
    },
    BodyResqs() {
      let id = this.id;
      sortingDetails(id).then(res => {
        console.log(res);
        this.sortPlanDetailBodyResqs = res.data.sortPlanDetailBodyResqs;
        this.sortPlanDetailHeadResq = res.data.sortPlanDetailHeadResq;
        let tableData = this.tableData;
        if (this.ischeck == true) {
          return;
        } else {
          tableData.push(this.sortPlanDetailHeadResq);
        }
      });
    },
    handleClick(row) {
      let id = row.id;
      this.$confirm("请确定是否连接打印机", "是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          print(id).then(res => {
            if (res.code == 20000) {
              wewin.LabelPrint(res.rows, { noView: "wewin P70" });
            } else {
              this.$message(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({ type: "info", message: "已取消打印" });
        });
    },
    BodyResqs() {
      let id = this.id;
      sortingDetails(id).then(res => {
        console.log(res);
        this.sortPlanDetailBodyResqs = res.data.sortPlanDetailBodyResqs;
        this.sortPlanDetailHeadResq = res.data.sortPlanDetailHeadResq;
        let tableData = this.tableData;
        if (this.ischeck == true) {
          return;
        } else {
          tableData.push(this.sortPlanDetailHeadResq);
        }
      });
    },
    handlePacking(row) {
      this.$router.push({
        name: "packingDetails",
        query: { id: row.id }
      });
    },
    handleDelete(row, $index) {
      console.log(row);
      let data = row.id;
      this.$confirm("你确定要删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          sortplanDelete(data).then(res => {
            if (res.code == 20000) {
              this.sortPlanDetailBodyResqs.splice($index, 1);
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            } else {
              this.$message({
                type: "warning",
                message: res.msg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    toredactorder() {
      // console.log(this.sortPlanDetailHeadResq)
      this.$router.push({
        name: "menu4",
        query: this.sortPlanDetailHeadResq
      });
    },
    selectList() {
      queryGoods().then(res => {
        console.log(res);
        this.list_1 = res.rows;
      });
    },
    //新增一行
    dialogFormVisibles() {
      let data = {
        processingId: this.sortPlanDetailHeadResq.id,
        goodsId: this.zhi_1,
        planCount: this.num
      };
      getsavedetial(data).then(res => {
        console.log(res);
        if (res.code == 20000) {
          this.$message({ type: "success", message: res.msg });
          this.dialogFormVisible = false;
          this.ischeck = true;
          this.BodyResqs();
        } else if (this.zhi_1 == "") {
          this.$message({ type: "warning", message: "请选择商品" });
        }
      });
    }
  },

  //生命周期 - 组件实例刚被创建
  beforeCreate() {},
  //创建完成 访问当前this实例
  created(params) {},
  //挂载之前
  beforeMount() {},
  //挂载完成 访问DOM元素
  mounted(query) {
    this.id = this.$route.query.id;
    this.BodyResqs();
    this.selectList();
  },
  //更新之前
  beforeUpdate() {},
  //更新之后
  updated() {},
  //for keep-alive 缓存功能，组件被激活时调用
  activated() {},
  //for keep-alive 组件被移除时调用
  deactivated() {},
  //组件销毁之前调用
  beforeDestroy() {},
  //组件销毁之后调用
  destroyed() {}
};
</script>
<style lang="scss">
.sortTitle {
  margin: 20px;
}
.el-table-collection {
  padding: 0 35px;
}
.information {
  padding: 20px 35px;
  box-sizing: border-box;
  display: flex;
  // justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.block {
  display: inline-block;
  .dainji {
    display: inline-block;
    margin-right: 10px;
  }
}
.xuanzeqi {
  display: inline-block;
}
.title {
  padding: 0 20px;
  box-sizing: border-box;
}
.input {
  width: 200px;
}
.yemian {
  margin-bottom: 20px;
}
</style>
